<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            border-radius: 50%;
            transform: translate();
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <!-- <div class="box2"></div> -->
    <p class="p1"></p>
    <p class="p2"></p>

    <script>
        let startX = 0, startY = 0, moveX = 0, moveY = 0, endX = 0, endY = 0
        let box1 = document.querySelector('.box1')

        box1.addEventListener('touchstart', function (e1) {
            startY = e1.targetTouches[0].pageY;
            startX = e1.targetTouches[0].pageX;
            // e1.preventDefault();
        })
        box1.addEventListener('touchmove', function (e2) {
            moveX = endX + e2.targetTouches[0].pageX - startX
            moveY = endY+ e2.targetTouches[0].pageY - startY
            box1.style.transform = `translate(${moveX}px,${moveY}px)`;
        });

        box1.addEventListener('touchend', function (e3) {

            endX = moveX
            endY = moveY

        })




    </script>
</body>

</html>